<template>
  <div>
    <a-form class="form" :form="form">
      <a-row class="form-row" :gutter="16">
        <a-col :lg="15" :md="15" :sm="24">
          <a-form-item label="标题">
            <a-input
              placeholder="请输入标题"
              v-decorator="['title',{rules: [{ required: true, message: '请输入标题', whitespace: true}]}]" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="16">
        <a-col :lg="{span: 7}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="区域">
            <a-select
              placeholder="请选择区域"
              v-decorator="[ 'region', {rules: [{ required: true, message: '请选择区域'}]} ]">
              <a-select-option :value="1">天心区</a-select-option>
              <a-select-option :value="2">开福区</a-select-option>
              <a-select-option :value="3">雨花区</a-select-option>
              <a-select-option :value="4">岳麓区</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="{span: 7, offset: 1}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="户型">
            <a-select
              placeholder="请选择户型"
              v-decorator="[ 'structure', {rules: [{ required: true, message: '请选择户型'}]} ]">
              <a-select-option :value="1">一室一厅</a-select-option>
              <a-select-option :value="2">二室一厅</a-select-option>
              <a-select-option :value="3">三室一厅</a-select-option>
              <a-select-option :value="4">三室二厅</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="{span: 7, offset: 1}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="租售类型">
            <a-select
              placeholder="请选择租售类型"
              v-decorator="[ 'sellType', {rules: [{ required: true, message: '请选择租售类型'}]} ]">
              <a-select-option :value="1">租</a-select-option>
              <a-select-option :value="2">售</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="16">
        <a-col :lg="15" :md="15" :sm="24">
          <a-form-item label="地址">
            <a-input
              placeholder="请输入地址"
              v-decorator="['address',{rules: [{ required: true, message: '请输入地址', whitespace: true}]}]" />
          </a-form-item>
        </a-col>
        <a-col :lg="{span: 7, offset: 1}" :md="{span: 12}" :sm="24">
          <a-form-item label="价格">
            <a-input
              prefix="￥"
              placeholder="请输入价格"
              v-decorator="['money',{rules: [{ required: true, message: '请输入价格'}]}]" >
              <a-select
                slot="addonAfter"
                style="width: 90px"
                v-decorator="['unit',{rules: [{ required: false}]}]">
                <a-select-option v-for="item in housePriceUnit" :key="item.value" :value="Number(item.value)">{{ item.text }}</a-select-option>
              </a-select>
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
  export default {
    name: "BisHouseContentBase",
    props: {
      title: {
        type: Object,
        default(){
          return {}
        }
      },
      region: {
        type: Object,
        default(){
          return {}
        }
      },
      structure: {
        type: Object,
        default(){
          return {}
        }
      },
      sellType: {
        type: Object,
        default(){
          return {}
        }
      },
      address: {
        type: Object,
        default(){
          return {}
        }
      },
      money: {
        type: Object,
        default(){
          return {}
        }
      },
      unit: {
        type: Object,
        default(){
          return {}
        }
      }
    },
    data() {
      return {
        housePriceUnit: this.$store.getters.housePriceUnit
      }
    },
    methods: {
      toString(val) {
        return val + ''
      }
    },
    created () {
      this.form = this.$form.createForm(this, {
        onFieldsChange: (_, changedFields) => {
          this.$emit('change', changedFields);
        },
        mapPropsToFields: () => {
          return {
            title: this.$form.createFormField({
              ...this.title,
              value: this.title.value,
            }),
            region: this.$form.createFormField({
              ...this.region,
              value: this.region.value,
            }),
            structure: this.$form.createFormField({
              ...this.structure,
              value: this.structure.value,
            }),
            sellType: this.$form.createFormField({
              ...this.sellType,
              value: this.sellType.value,
            }),
            address: this.$form.createFormField({
              ...this.address,
              value: this.address.value,
            }),
            money: this.$form.createFormField({
              ...this.money,
              value: this.money.value,
            }),
            unit: this.$form.createFormField({
              ...this.unit,
              value: this.unit.value,
            })
          };
        },
        onValuesChange (_, values) {
          console.log(values);
        },
      });
    },
    computed: {
      getUnit(){
        return this.unit.value + ''
      }
    },
    watch: {
      title () {
        this.form.updateFields({
          title: this.$form.createFormField({
            ...this.title,
            value: this.title.value,
          }),
        });
      },
      region () {
        this.form.updateFields({
          title: this.$form.createFormField({
            ...this.region,
            value: this.region.value,
          }),
        });
      },
      structure () {
        this.form.updateFields({
          title: this.$form.createFormField({
            ...this.structure,
            value: this.structure.value,
          }),
        });
      },
      sellType () {
        this.form.updateFields({
          title: this.$form.createFormField({
            ...this.sellType,
            value: this.sellType.value,
          }),
        });
      },
      address () {
        this.form.updateFields({
          title: this.$form.createFormField({
            ...this.address,
            value: this.address.value,
          }),
        })
      },
      money () {
        this.form.updateFields({
          money: this.$form.createFormField({
            ...this.money,
            value: this.money.value,
          }),
        })
      },
      unit () {
        this.form.updateFields({
          unit: this.$form.createFormField({
            ...this.unit,
            value: this.unit.value,
          }),
        })
      }
    }
  }
</script>

<style scoped>

</style>